Vue 实现 登陆后打开主页面（登陆组件 + 主页面组件） |
您所在的位置：网站首页 › vue 登陆页面 › Vue 实现 登陆后打开主页面（登陆组件 + 主页面组件） |
Vue 实现 登陆后打开主页面（登陆组件 + 主页面组件）
|
本次演示，项目所需iview，router
首先
在 views 目录 新建 两个 组件 ( login.vue ，index.vue )
login.vue
登录
登 录
export default {
methods: {
login() { // 假设登陆成功，则跳转到 index 组件
this.$router.replace('/index');
}
}
}
body {
background-image: url(../assets/timg2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
* {
margin: 0;
padding: 0;
}
#wrap {
height: 600px;
width: 100%;
background-position: center center;
position: relative;
}
#head {
height: 120px;
width: 100;
background-color: #66CCCC;
text-align: center;
position: relative;
}
#wrap .logGet {
height: 408px;
width: 368px;
position: absolute;
background-color: #FFFFFF;
top: 100px;
right: 15%;
}
.logC a button {
width: 100%;
height: 45px;
background-color: #ee7700;
border: none;
color: white;
font-size: 18px;
}
.logGet .logD.logDtip .p1 {
display: inline-block;
font-size: 28px;
margin-top: 30px;
width: 86%;
}
#wrap .logGet .logD.logDtip {
width: 86%;
border-bottom: 1px solid #ee7700;
margin-bottom: 60px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
.logGet .lgD img {
position: absolute;
top: 12px;
left: 8px;
}
.logGet .lgD input {
width: 100%;
height: 42px;
text-indent: 2.5rem;
}
#wrap .logGet .lgD {
width: 86%;
position: relative;
margin-bottom: 30px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
}
#wrap .logGet .logC {
width: 86%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.title {
font-family: "宋体";
color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 使用css3的transform来实现 */
font-size: 36px;
height: 40px;
width: 30%;
}
.copyright {
font-family: "宋体";
color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 使用css3的transform来实现 */
height: 60px;
width: 40%;
text-align: center;
}
index.vue
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-nav{
width: 420px;
margin: 0 auto;
margin-right: 20px;
}
Item 1
Item 2
Item 3
Item 4
Item 1
Option 1
Option 2
Option 3
Item 2
Option 1
Option 2
Item 3
Option 1
Option 2
Home
Components
Layout
export default {
}
index.vue 要渲染两个组件( 子组件，模拟 )
在 components 目录 中 新建两个 vue 文件
one.vue
index 页面 里 的 第一个 组件
export default {
data() {
return {
};
}
}
two.vue
index 页面 里 的 第二个 组件
export default {
data() {
return {
};
}
}
App.vue 文件中修改
根目录下，访问直接是 显示 login.vue 组件 效果： 示例源码： |
【本文地址】
今日新闻 |
推荐新闻 |